html,
body,
.menu-wrap a {
  color: #b8b7ad;
}

.menu-wrap a:hover,
.menu-wrap a:focus {
  color: #c94e50;
}

.content {
  position: relative;
  background: #b4bad2;
}

.content::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  content: '';
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
  transition: opacity 0.4s, transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

/* Menu Button */
.menu-button {
  position: fixed;
  margin: 1em;
  padding: 0;
  border: none;
  text-indent: 2.5em;
  font-size: 1.5em;
  color: transparent;
  width: 50px;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  background-color: #000;
  border-radius: 5px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 1000;
  top: 20px;
  left: 20px;
}

.menu-button::before {

  position: absolute;
  top: 0.5em;
  right: 0.5em;
  bottom: 0.5em;
  left: 0.5em;
  background: linear-gradient(#ffffff 20%, transparent 20%, transparent 40%, #ffffff 40%, #ffffff 60%, transparent 60%, transparent 80%, #ffffff 80%);
  content: '';
}

.menu-button:hover {
  opacity: 0.6;
}

/* Close Button */
.close-button {
  width: 1em;
  height: 1em;
  position: absolute;
  right: 1em;
  top: 1em;
  overflow: hidden;
  text-indent: 1em;
  font-size: 0.75em;
  border: none;
  background: transparent;
  color: transparent;
}

.close-button::before,
.close-button::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  background: #bdc3c7;
}

.close-button::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close-button::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Menu */
.menu-wrap {
  position: fixed;
  z-index: 1001;
  width: 300px;
  height: 100%;
  background: #fff;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
  -webkit-transform: translate3d(-320px, 0, 0);
  transform: translate3d(-320px, 0, 0);
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.menu,
.icon-list {
  height: 100%;
}

.icon-list {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.icon-list a {
  display: block;
  padding: 0.8em;
  -webkit-transform: translate3d(0, 500px, 0);
  transform: translate3d(0, 500px, 0);
  text-align: center;
}

.icon-list a:hover {
  padding: 1em;
  font-size: 1.5em;
  width: 110%;
}

.icon-list,
.icon-list a {
  -webkit-transition: -webkit-transform 0s 0.4s;
  transition: transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  font-size: 15px;
}

.icon-list a:nth-child(2) {
  -webkit-transform: translate3d(0, 1000px, 0);
  transform: translate3d(0, 1000px, 0);
}

.icon-list a:nth-child(3) {
  -webkit-transform: translate3d(0, 1500px, 0);
  transform: translate3d(0, 1500px, 0);
}

.icon-list a:nth-child(4) {
  -webkit-transform: translate3d(0, 2000px, 0);
  transform: translate3d(0, 2000px, 0);
}

.icon-list a:nth-child(5) {
  -webkit-transform: translate3d(0, 2500px, 0);
  transform: translate3d(0, 2500px, 0);
}

.icon-list a:nth-child(6) {
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0);
}

.icon-list a span {
  margin-left: 10px;
  font-weight: 700;
}

/* Shown menu */
.show-menu .menu-wrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.show-menu .icon-list,
.show-menu .icon-list a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.show-menu .icon-list a {
  -webkit-transition-duration: 0.9s;
  transition-duration: 0.9s;
}

.show-menu .content::before {
  opacity: 1;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.menu-wrap .menu .icon-list a {
  margin-top: 5px;
  background: none;
  border-radius: 30px;
  border: 1px solid #9194a7;
  color: #5111e7;
  text-indent: 10px;
  line-height: 26px;
  font-size: 12px;
}

.h-opulent-color-animate {
  animation: opulent-color-animate 3s steps(100) infinite;
  color: #151515;
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase;
}

@keyframes opulent-color-animate {
  0% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }

  1% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  2% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  3% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  4% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  5% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  6% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  7% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  8% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  9% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  10% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  11% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px
    );
  }
  12% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px
    );
  }
  13% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px
    );
  }
  14% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0);
  }
  15% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0);
  }
  16% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  17% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  18% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  19% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  20% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  21% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  22% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  23% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  24% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  25% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  26% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0.5px
    );
  }
  27% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0.5px
    );
  }
  28% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  29% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  30% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  31% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  32% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  33% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  34% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  35% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0.5px
    );
  }
  36% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0.5px
    );
  }
  37% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0.5px
    );
  }
  38% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  39% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  40% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  41% {
    text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime;
    filter: blur(0);
  }
  42% {
    text-shadow: 0 0 0 #0c33f5, 0 0 0 lime;
    filter: blur(0);
  }
  43% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0);
  }
  44% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0);
  }
  45% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0);
  }
  46% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px
    );
  }
  47% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0.5px
    );
  }
  48% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  49% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  50% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  51% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  52% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  53% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  54% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  55% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0.5px
    );
  }
  56% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0.5px
    );
  }
  57% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0.5px
    );
  }
  58% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  59% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  60% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  61% {
    text-shadow: 30px 0 0 red, -30px 0 0 lime;
    filter: blur(0);
  }
  62% {
    text-shadow: 0 0 0 red, 0 0 0 lime;
    filter: blur(0);
  }
  63% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0);
  }
  64% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0);
  }
  65% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0);
  }
  66% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0.5px
    );
  }
  67% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0.5px
    );
  }
  68% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  69% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  70% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  71% {
    text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5;
    filter: blur(0);
  }
  72% {
    text-shadow: 0 0 0 red, 0 0 0 #0c33f5;
    filter: blur(0);
  }
  73% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  74% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  75% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  76% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0);
  }
  77% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  78% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  79% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  80% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0);
  }
  81% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0);
  }
  82% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0);
  }
  83% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px
    );
  }
  84% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px
    );
  }
  85% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px
    );
  }
  86% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0.5px
    );
  }
  87% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0.5px
    );
  }
  88% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  89% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  90% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0);
  }
  91% {
    text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5;
    filter: blur(0);
  }
  92% {
    text-shadow: 0 0 0 lime, 0 0 0 #0c33f5;
    filter: blur(0);
  }
  92% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  93% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  94% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  95% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0);
  }
  96% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  97% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  98% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  99% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
  100% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0);
  }
}
